/* eslint no-underscore-dangle: 0 */
import React, { Component } from 'react';
import { Table, Pagination, Message } from '@alifd/next';
import IceContainer from '@icedesign/container';
import FilterForm from './Filter';
import styles from './index.module.scss';
import request from '../../../../utils/request';
import { host, isSelectedCom, isSelectedMode } from '../../../../const';
import WebStorageCache from 'web-storage-cache';

const wsCache = new WebStorageCache();
export default class EnhanceTable extends Component {
    constructor(props) {
        super(props);

        this.state = {
            battleSettingTableDataSourece: {
                total: 0,
            },
            query: {
                page: 1,
                pageSize: 10,
            },
        };
        this.refreshTableData();
    }

    refreshTableData = () => {
        request({
            method: 'POST',
            url: `${host}/battle/set/query`,
            data: this.state.query,
        }).then((res) => {
            const code = res?.data?.code;
            if (code === 200) {
                const data = res?.data?.data;
                this.setState({
                    battleSettingTableDataSourece: data,
                });
            }
        });
    }

    filterFormChange = (value) => {
        this.state.query = value;
    }

    filterTable = () => {
        this.state.query.page = 1;
        this.state.query.pageSize = 10;
        this.refreshTableData();
    }

    handlePaginationChange = (value) => {
        this.state.query.page = value;
        this.refreshTableData();
    }

    renderOper = (value, index, record) => {
        let oper1 = null;
        let oper2 = null;

        oper1 = <a href="javascript:;" onClick={this.startBattle.bind(this, record)}>开始演习</a>;
        oper2 = <a href="javascript:;" onClick={this.deleteBattleSetting.bind(this, record)}>删除</a>;
        return (
            <div>
                {oper1} {oper2}
            </div>
        );
    };


    startBattle = (record) => {
        const selectedMode = isSelectedMode();
        if (!selectedMode) {
            return;
        }
        const selectedCom = isSelectedCom();
        if (!selectedCom) {
            return;
        }

        const lProtocol = wsCache.get('protocol');
        request({
            method: 'GET',
            url: `${host}/battle/start/${record.id}/${lProtocol}`,
        }).then(() => {
            wsCache.set('mapType', record.mapType);
            console.log('ws设置了mapType', record.mapType);
            Message.success('开始演习');
            location.href = '#/battle/show';
        });
    }

    deleteBattleSetting = (record) => {
        request({
            method: 'DELETE',
            url: `${host}/battle/set/${record.id}`,
        }).then(() => {
            Message.success('删除成功');
            this.refreshTableData();
        });
    }
    expandedRowRender = (record, index) => {
        const list = record.teamData;

        return (<Table
            dataSource={list || []}
            className="basic-table ma pa"
            style={styles.basicTable}
            emptyContent={(<div>暂时没有数据~</div>)}
            hasBorder={false}
        >
            <Table.Column
                title="队名"
                dataIndex="team"
                cell={(value) => {
                    let str = '';
                    switch (value) {
                    case 'yellow':
                        str = '劫匪';
                        break;
                    case 'orange':
                        str = '人质';
                        break;
                    case 'blue':
                        str = '蓝队';
                        break;
                    case 'red':
                        str = '红队';
                        break;

                    default:
                        break;
                    }

                    return str;
                }}
            />
            <Table.Column
                title="开始编号"
                dataIndex="startNum"
            />
            <Table.Column
                title="结束编号"
                dataIndex="endNum"
            />

            <Table.Column
                title="主武器"
                dataIndex="primaryWeapon"
                cell={value => (value || '--')}
            />
            <Table.Column
                title="副武器"
                dataIndex="secondaryWeapon"
                cell={value => (value || '--')}
            />

        </Table>);
    }

    render() {
        return (
            <div className="filter-table">
                <IceContainer title="内容筛选">
                    <FilterForm
                        onChange={this.filterFormChange}
                        onSubmit={this.filterTable}
                    />
                </IceContainer>
                <IceContainer>
                    <Table
                        dataSource={this.state.battleSettingTableDataSourece.list}
                        className="basic-table"
                        style={styles.basicTable}
                        expandedRowRender={this.expandedRowRender}
                        hasExpandedRowCtrl
                        //   expandedRowIndent={[4]}
                        hasBorder={false}
                    >
                        <Table.Column
                            title="方案名称"
                            dataIndex="name"
                        />
                        <Table.Column
                            title="地图名称"
                            dataIndex="mapName"
                        />
                        <Table.Column
                            title="地图类型"
                            dataIndex="mapType"
                            cell={value => (Number(value) === 1 ? '室内地图' : '室外地图')}
                        />
                        {/* <Table.Column
              console.log('测试 ~ file: index.jsx ~ line 193 ~ EnhanceTable ~ value', value)
              console.log('测试 ~ file: index.jsx ~ line 192 ~ EnhanceTable ~ value', value)
                          title="红方"
                          dataIndex="redVestNumStr"
                      />
                      <Table.Column
                          title="蓝方"
                          dataIndex="blueVestNumStr"
                      />
                      <Table.Column
                          title="人质"
                          dataIndex="orangeVestNumStr"
                      />
                      <Table.Column
                          title="劫匪"
                          dataIndex="yellowVestNumStr"
                      /> */}
                        <Table.Column
                            title="操作"
                            width={150}
                            cell={this.renderOper}
                        />
                    </Table>
                    <div className={styles.paginationWrapper}>
                        <Pagination
                            current={this.state.query.page}
                            onChange={this.handlePaginationChange}
                            total={this.state.battleSettingTableDataSourece.total}
                            pageSize={10}
                        />
                    </div>
                </IceContainer>
            </div>
        );
    }
}
